<template>
	<view>
		<DaDropdownVue2
			ref="dropdown"
			:dropdownMenu="dropdownMenuList"
			textColor="#333333"
			:duration="300"
			fixedTop
			@confirm="handleConfirm"
			@close="handleClose"
			@open="handleOpen"
		>
			<template v-slot:slot1="{ item, index }">
				<view>自定义插槽内容</view>
			</template>
		</DaDropdownVue2>
		<view class="list-cont">
			<image class="banner" :src="typeInfo.image" mode="aspectFill"></image>

			<liu-waterfall :dataList="list" :column="2" @click="select"></liu-waterfall>
		</view>
	</view>
</template>

<script>
import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue';
export default {
	components: { DaDropdownVue2 },
	data() {
		return {
			list: [
				// {
				// 	title: '华为MateX5折叠屏手机',
				// 	desc: '头层牛皮智能休眠',
				// 	picUrl: 'http://img.alicdn.com/img/i2/44096902/O1CN01YYckOI20rAg5AOb95_!!4611686018427387270-0-saturn_solar.jpg_.webp'
				// },
				// {
				// 	title: '乔安无线摄像头',
				// 	desc: '乔安无线摄像头手机远程监控器家用免插电360度智能高清夜视摄影',
				// 	picUrl: 'http://img.alicdn.com/img/i1/441540079/O1CN01rjlbA41CSEGprkF61_!!0-saturn_solar.jpg_.webp'
				// },
				// {
				// 	title: 'Redmi Note 14 Pro',
				// 	desc: '手机红米note小',
				// 	picUrl: 'http://img.alicdn.com/img/i3/6606702689/O1CN01xlVYuw1Vjbz7tuL73_!!0-saturn_solar.jpg_.webp'
				// },
				// {
				// 	title: '2025新款官方旗舰正品mt60pro',
				// 	desc: '智能手机电竞游戏超薄6.8大屏512GB全网通5g手机学生价备用机',
				// 	picUrl: 'http://img.alicdn.com/img/i1/2458071660/O1CN01jArAFe1O8KTjhhoTL_!!2458071660-0-alimamacc.jpg_.webp'
				// },
				// {
				// 	picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
				// 	title: '思考',
				// 	desc: '我是第1个图片',
				// 	id: 1
				// },
				// {
				// 	picUrl: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg',
				// 	title: '兔子',
				// 	desc: '我是第2个图片',
				// 	id: 2
				// },
				// {
				// 	picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
				// 	title: '雨天',
				// 	desc: '我是第3个图片',
				// 	id: 3
				// }
			],
			dropdownMenuList: [
				{
					title: '排序',
					type: 'sort',
					prop: 'order',
					value: 'asc' // 默认升序
				}
			],
			id: '',
			typeInfo: {},
			order: '',
			version: '',
			old: '',
			memory: ''
		};
	},
	onLoad: function (option) {
		this.id = option.id;
		this.typeInfo = uni.getStorageSync('TypeInfo');
		this.dropdownMenuList = this.dropdownMenuList.concat(uni.getStorageSync('SearchData'));
		this.getList();
	},
	methods: {
		async getList() {
			let { goods } = await this.$api.request('/base/getgoodbyid', 'POST', {
				id: this.id,
				order: this.order,
				version: this.version,
				old: this.old,
				memory: this.memory
			});
			this.list = goods;
		},
		select(e) {
			uni.navigateTo({
				url: `/pages/product/product?id=${e.product_id}`
			});
		},
		handleConfirm(v, selectedValue) {
			console.log('handleConfirm ==>', v, selectedValue);
			this.order = selectedValue.order == 'desc' ? 1 : 2;
			this.version = selectedValue.version.ft1 || '';
			this.old = selectedValue.old.ft1 || '';
			this.memory = selectedValue.memory.ft1 || '';
			this.getList();
		},
		handleClose(v, callbackMenuList) {
			// console.log('handleClose ==>', v, callbackMenuList);
		},
		handleOpen(v) {
			// console.log('handleOpen ==>', v);
		}
	}
};
</script>

<style lang="scss" scoped>
.list-cont {
	// padding: 0 20rpx;

	.banner {
		width: 690rpx;
		height: 270rpx;
		margin: 30rpx 30rpx 0;
		border-radius: 18rpx;
	}
}
</style>
